<template>
	<view>
		<uni-byt-top-com title="时间区间选择" :backShow="backShow"></uni-byt-top-com>
		<scroll-view scroll-y="true" :style="{height:scrollHeight+'px'}">
			<view class="flex-col">
				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">年月日：</text>
						<text class="text-size-16 text-min-color mt-12">mode:date</text>
						<text class="text-size-16 text-min-color mt-12">date:{{JSON.stringify(date1)}}</text>
					</view>
					<u-button @click="open('dateShow','date')" type="warning">打开弹窗</u-button>

					<!-- 自定义 -->
					<uni-byt-date-rang mode='date' :show.sync="dateShow" @change="dateConfirm"></uni-byt-date-rang>
				</view>
				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">时分：</text>
						<text class="text-size-16 text-min-color mt-12">mode:time</text>
						<text class="text-size-16 text-min-color mt-12">date:{{JSON.stringify(date2)}}</text>
					</view>
					<u-button @click="open('timeShow','time')" type="warning">打开弹窗</u-button>
					<!-- 自定义 -->
					<uni-byt-date-rang mode='time' :show.sync="timeShow" @change="dateConfirm"></uni-byt-date-rang>
				</view>
				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">年月：</text>
						<text class="text-size-16 text-min-color mt-12">mode:year-month</text>
						<text class="text-size-16 text-min-color mt-12">date:{{JSON.stringify(date3)}}</text>
					</view>
					<u-button @click="open('yearMonthShow','year-month')" type="warning">打开弹窗</u-button>
					<!-- 自定义 -->
					<uni-byt-date-rang mode='year-month' :show.sync="yearMonthShow"
						@change="dateConfirm"></uni-byt-date-rang>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getHeight
	} from "@/util"
	export default {
		data() {
			return {
				scrollHeight: getHeight(),
				backShow: false,

				// 自定义选择器
				dateShow: false,
				timeShow: false,
				yearMonthShow: false,
				// 时间格式
				mode: 'date',
				// 选择的时间区间数据
				date1: [],
				date2: [],
				date3: []
			}
		},
		onLoad(play) {
			if (play.backShow) {
				if (play.backShow == '1') {
					this.backShow = true
				}
			}
		},
		methods: {
			// 时间确认选择
			dateConfirm(date) {
				console.log('时间确认选择:', date);
				switch (this.mode) {
					case 'date':
						console.log("年-月-日");
						this.date1 = date
						break;
					case 'time':
						console.log("时:分");
						this.date2 = date
						break;
					case 'year-month':
						console.log("年-月");
						this.date3 = date
						break;
					default:
						uni.$u.toast("暂无此时间格式")
						break;
				}
			},
			open(show, mode) {
				this[show] = true
				this.mode = mode
			}
		}
	}
</script>

<style>

</style>